<template>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <el-row type="flex" class="row-bg">
                <el-col :span="8">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content">
                        <span>在</span>
                        <span>线</span>
                        <span>视</span>
                        <span>频</span>
                        <span>监</span>
                        <span>测</span>
                        <span>平</span>
                        <span>台</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content"></div>
                </el-col>
            </el-row>
        </div>
        <!-- cesiumr容器 -->
        <div id="cesiumContainer"></div>
        <!-- 工具栏容器 -->
        <div id="menuContainer">
            <menuSys></menuSys>
        </div>
        <!-- 系统弹框 -->
        <div v-for="(value, key) in dialogs" :key="key">
            <dialogSys
                    v-model="value.show"
                    :cancel="value.cancel"
                    :title="value.title"
                    :shade="value.shade"
                    :location="value.location"
                    :area="value.area"
                    :data="value.data"
                    :content="value.content"
            ></dialogSys>
        </div>
        <template v-for="(item,index) in bubbles">
            <bubbleSys
                    v-model="item.show"
                    :position="item.position"
                    :content="item.content"
                    :area="item.area"
                    :data="item.data"
                    :key="index"
            ></bubbleSys>
        </template>
    </div>
</template>

<script>
    import cesiumBusiness from "../utils/cesiumBusiness";
    import menuSys from "../components/common/menuSys";
    import dialogSys from "../components/common/dialog";
    import bubbleSys from "../components/common/Bubble"

    export default {
        name: "home",
        data() {
            return {
                dialogs: {},
                bubbles: {}
            };
        },
        components: {
            menuSys,
            dialogSys,
            bubbleSys
        },
        computed: {},
        methods: {
            changedialog(opions) {
                var that = this;
                var oriObj = that.dialogs[opions.title] || {};
                var newobj = Object.assign(oriObj, opions);
                //单个弹框
                if (!newobj.multiple) {
                    var prename = newobj.title;
                    for (let key in that.dialogs) {
                        if (prename != that.dialogs[key].title) {
                            that.dialogs[key].show = false;
                        }
                    }
                }
                this.$set(that.dialogs, newobj.title, newobj);
            },
            changebubble(opions) {
                var that = this;
                var oriObj = that.bubbles[opions.title] || {};
                var newobj = Object.assign(oriObj, opions);
                //单个弹框
                if (!newobj.multiple) {
                    var prename = newobj.title;
                    for (let key in that.bubbles) {
                        if (prename != that.bubbles[key].title) {
                            that.bubbles[key].show = false;
                        }
                    }
                }
                this.$set(that.bubbles, newobj.title, newobj);
            },
        },
        mounted() {
            this.$nextTick(() => {
                var cesiumHelper = new cesiumBusiness("cesiumContainer", Cesium);
                cesiumHelper.init(); //初始化
                cesiumHelper.exportVariable(); //导出全局变量

                var dataHelper = new dataManage(window.viewer, window.Cesium);
                dataHelper.loadDataAll();

                //注册对话框
                this.$bus.$on("dialog", (opions) => {
                    this.changedialog(opions);
                });

                //注册气泡
                this.$bus.$on("bubble", (opions) => {
                    this.changebubble(opions);
                });
            });
        },
    };
</script>

<style lang="scss">
    .container {
        width: 100%;
        height: 100%;
        display: flex;

        #menuContainer {
            position: fixed;
            left: 5rem;
            top: 5rem;
            z-index: 1;
        }

        .header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 3.75rem;
            z-index: 1;

            .row-bg {
                height: 3.75rem;
                background: url(../assets/home/头部背景.png) no-repeat;
                background-size: 100% 100%;

                .el-col {
                    height: 3.75rem;
                    line-height: 3.75rem;
                    box-sizing: border-box;

                    .grid-content {
                        height: 3.75rem;
                        line-height: 4.5rem;
                        color: rgb(193, 224, 243);
                        font-size: 1.75rem;
                        font-weight: bold;
                        font-family: "Courier New", Courier, monospace;

                        span {
                            margin: 0 1rem;
                        }
                    }
                }
            }
        }

        #cesiumContainer {
            position: relative;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        #messageSys {
            position: fixed;
            left: 0;
            top: 5rem;
            height: 48px;
            line-height: 48px;
            width: 100%;
        }

        #videoSys {
            position: fixed;
            left: 1rem;
            top: 8rem;
            bottom: 1rem;
            right: 1rem;
            background: url(../assets/video/背景图片.png) no-repeat;
            background-size: 100% 100%;
            padding: 26px;
            box-sizing: border-box;
        }
    }
</style>
